<template>
  <a-card title="角色权限管理" style="width: 100%">
    <el-table
      :data="manager_data"
      style="width: 100%"
      row-key="id"
      lazy
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column label="ID" width="88" align="center">
        <template #default="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="登录名" width="120">
      </el-table-column>
      <el-table-column prop="role" label="角色" width="120"> </el-table-column>
      <el-table-column prop="market" label="是否是销售" width="100">
        <template #default="scope">
          {{ scope.row.market ? "是" : "不是" }}
        </template>
      </el-table-column>
      <el-table-column label="微信绑定" width="130">
        <el-button type="primary" link :plain="true" @click="open4"
          >[ 点击绑定 ]</el-button
        >
      </el-table-column>
      <el-table-column prop="last_time" label="最后登录时间" width="160">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-icon><timer /></el-icon>
            <span style="margin-left: 10px">{{ scope.row.last_time }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="last_ip" label="最后登录IP" width="170">
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button @click="updateClick(scope.row)" type="primary"
            >编辑</el-button
          >
          <el-button @click="login_dialogTableVisible = true"
            >登陆日志</el-button
          >
          <el-button @click="operationData">操作日志</el-button>
          <el-button type="danger" @click="delete_role(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-config-provider :locale="zhCn">
      <div
        style="margin-top: 1.5%; display: flex; justify-content: space-between"
      >
        <el-button type="primary" @click="manager_add()">添加</el-button>
        <el-pagination
          background
          :total="manager_data.length"
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[5, 10, 15, 30]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-config-provider>
    <!-- 登录日志对话框 -->
    <el-dialog
      v-model="login_dialogTableVisible"
      title="登录日志"
      style="height: 50%"
    >
      <el-table :data="LoginData">
        <el-table-column property="date" label="时间" />
        <el-table-column property="operation" label="操作" />
        <el-table-column property="ip" label="IP" />
        <el-table-column property="address_ip" label="IP归属地" />
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="LoginData.length"
        style="float: right; margin-top: 3%"
      />
    </el-dialog>
    <!--操作日志对话框 -->
    <el-dialog
      v-model="operation_dialogTableVisible"
      title="操作日志"
      style="height: 60%"
    >
      <div style="width: 40%; float: right">
        <el-input v-model="input" placeholder="请输入内容" clearable>
          <template #append>
            <el-button :icon="Search" @click="sousuo" />
          </template>
        </el-input>
      </div>
      <el-table :data="operation_data">
        <el-table-column property="date" label="时间" />
        <el-table-column property="operation" label="操作" />
        <el-table-column property="ip" label="IP" />
        <el-table-column property="address_ip" label="IP归属地" />
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="operation_data.length"
        style="float: right; margin-top: 3%"
      />
    </el-dialog>
  </a-card>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "@vue/runtime-core";
import axios from "axios";
import { useRouter } from "vue-router";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { ElMessage, ElMessageBox } from "element-plus";
import { Timer, Search } from "@element-plus/icons-vue";

//获取管理员数据
const manager_data = ref([]);
const manager = async () => {
  var { data } = await axios.get("http://localhost:5200/guanliyuans");

  manager_data.value = data;
};
//分页
let locale = ref(zhCn); //显示中文
const currentPage4 = ref(1); //当前页数
const pageSize4 = ref(5); // 每页显示多少条
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
//添加按钮
const router = useRouter();
const manager_add = () => {
  router.push("/sys/admin/listAdd");
};
//编辑按钮
const updateClick = (row: any) => {
  router.push({ path: "/sys/admin/listUpdate", query: { id: row.id } });
};
//删除数据
const delete_role = async (id: any) => {
  ElMessageBox.confirm(`此操作将永久删除id为${id}数据, 是否继续?`, "提示", {
    confirmButtonText: "确实删除",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let res = await axios.delete(`http://localhost:5200/guanliyuans/${id}`);
      if (res.status == 200) {
        ElMessage({
          type: "success",
          message: `ID为${id} 删除成功！`,
        });
        manager();
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: `ID为${id} 已取消删除~`,
      });
    });
};

//点击微信
const open4 = () => {
  ElMessage.error("微信公众号功能未开启，请先开启");
};

//登录日志
const login_dialogTableVisible = ref(false);
const LoginData = [
  {
    date: "2022-12-12",
    operation: "登录成功",
    ip: "122.138.170.136:52762",
    address_ip: "河南省濮阳市",
  },
  {
    date: "2022-12-13",
    operation: "登录成功",
    ip: "122.138.170.136:52762",
    address_ip: "河北省保定市",
  },
];
//操作日志
const operation_dialogTableVisible = ref(false);
const operation_data = ref([]);
const operationData = async () => {
  operation_dialogTableVisible.value = true;
  var { data } = await axios.get("http://localhost:5200/operations");
  operation_data.value = data;
};

//搜索功能
const input = ref("");
const sousuo = async () => {
  console.log(input.value);
  let { data } = await axios.get(
    `http://localhost:5200/operations?operation=${input.value}`
  );
  operation_data.value = data;
};

onMounted(() => {
  manager();
});
</script>

<style lang="scss" scoped></style>
